<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<style>
			.form-wrap {
				padding: 10px;
			}
			select {
				width: 380px;
				height: 38px;
				line-height: 1.3;
				border-width: 1px;
				border-style: solid;
				border-color: #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}
			.layui-form-item .layui-form-label{
				width: 110px;
			    padding: 8px 15px;
			    height: 38px;
			    line-height: 20px;
			    border-width: 1px;
			    border-style: solid;
			    border-radius: 2px 0 0 2px;
				border-color: #e6e6e6;
			    text-align: center;
			    background-color: #FBFBFB;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    box-sizing: border-box;
			}
			.layui-form-item .layui-input-inline{
				width: 380px;
			}
		</style>
	</head>

	<body>
		<div class="form-wrap">																
			<form id="kpiItem_form" action="" method="post" class="layui-form layui-form-pane" enctype="multipart/form-data">
				<div class="layui-form-item">
					<label for="kpi_code" class="layui-form-label">
                        <span class="we-red">*</span>身份
                    </label>
					<div class="layui-input-inline" style="width:120px" >
						<select id="position_select" name="positionCode" required="" lay-verify="required" autocomplete="off" class="layui-input">
							
						</select>
					</div>
				</div>
				
				<table class="layui-table"  lay-filter="kpiSet_table" id="kpiSet_table" style="margin: 0"></table>
				
				<div class="layui-form-item">
					<button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
				</div>
			</form>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script type="text/javascript">
			// 首先获取表头数据
			$(function(){
				// 点击更换图片按钮
				var ajaxParam = {
					url : commonUtil.domain() +'/admin/wxwork/kpi/item/list',
					data : {
						type : 0
					}
				}
				// 发送ajax 提交表单数据
				ajaxUtil.post(ajaxParam, function(data) {
					var headList = data.data;
					// 构造表头json
					var cols = [];
					cols[0] = {field:'kpiName',width:100};
					for(var i = 0; i < headList.length; i ++){
						var item = headList[i];
						var colsItem = {};
						colsItem.field = "kpiCodeCloumn_" + item.kpiCode;
						colsItem.title = item.kpiName;
						colsItem.edit = "edit";
						colsItem.width = 100;
						cols.push(colsItem);
					}
					console.info(cols);
					window.cols = cols;
				});
			});
			
			layui.use(['table','form', 'layer'], function() {
				var form = layui.form;
				var	layer = layui.layer;
				var	table = layui.table;
				// 请求职位列表填充到下拉框
				var ajaxParam = {
					url: commonUtil.domain() + '/admin/wxwork/position/list'
				}
				ajaxUtil.post(ajaxParam, function(data) {
					data.data.unshift({positionCode:20000,positionName:'门店'})
					data.data.unshift({positionCode:10000,positionName:'大区'})
					selectUtil.fillSelect($('#position_select'), data.data, "positionCode", "positionName");
					form.render('select');
				});
				// 初始化编辑表格				
				var id = commonUtil.getRequestParam("id");
				var url = commonUtil.domain() +'/admin/wxwork/kpi/item/list?type=1';
				if(id){
					// 如果有id参数 则是请求其他的url
					url = commonUtil.domain() +'/admin/wxwork/kpi/item/list';
				}
				window.kpiSetTable = table.render({
					id: 'kpiSetTable',
					elem: '#kpiSet_table',
					url: url, // 数据接口
					method: 'get',
					request: {
						pageName: 'pageNum', // 分页当前页数发给后台的参数名
						limitName: 'pageSize' // 分页每页多少条发给后台的参数名
					},
					cols: [
						window.cols
					]
				});
				// 监听表单提交
				form.on('submit(add)', function(data) {
					// 提交的时候 获取表格里面的数据
					// 首先得到当前选择的角色
					var positionCode = $('#position_select option:selected').val();
					var dataList = table.cache.kpiSetTable;
					var submitList = [];
					for(var i = 0; i < dataList.length; i ++){
						var item = dataList[i];
						var kpiCodeRow = item.kpiCode
						for(key in item){
							if(key.indexOf("kpiCodeCloumn") != -1 && item[key].trim() != ""){
								var str = positionCode + "_" + kpiCodeRow + "_" + key.split("_")[1] + "_" + item[key];
								console.info(str);
								submitList.push(str);
							}
						}
					}
					console.info(submitList);
					// 提交到后台
					var ajaxParam = {
						url : commonUtil.domain() +'/admin/wxwork/kpi/set/insert',
						traditional: true,
						data : {
							kpiSetList : submitList
						}
					}
					ajaxUtil.post(ajaxParam, function(data) {
						console.info(data);
						if(data.code == 200){
							layer.alert("设定成功。",function(){
								// 刷新父级的用户表格
								var parentHtml = window.parent;
								parentHtml.kpiSetTable.refresh();
								// 关闭当前frame
								var index = parentHtml.layer.getFrameIndex(window.name);
								parentHtml.layer.close(index);	
							});
						}else{
							layer.alert(data.msg);
						}
					});
					return false;
				});
			});
		</script>
	</body>
</html>